<template>
  <view class="demo-page">
    <!-- 页面标题 -->
    <view class="header bg-white shadow-sm p-4 mb-4">
      <view class="text-2xl font-bold text-center">组件示例</view>
      <view class="text-sm text-gray-500 text-center mt-1">Vant + Tailwind CSS 演示</view>
    </view>

    <!-- 按钮组件示例 -->
    <view class="container">
      <view class="card">
        <view class="text-lg font-semibold mb-4">按钮组件</view>
        <view class="space-y-3">
          <button class="btn-primary w-full">主要按钮</button>
          <button class="btn-secondary w-full">次要按钮</button>
          <button class="w-full bg-gray-100 text-gray-700 px-6 py-3 rounded-lg font-medium">
            默认按钮
          </button>
        </view>
      </view>

      <!-- 卡片组件示例 -->
      <view class="card">
        <view class="text-lg font-semibold mb-4">卡片组件</view>
        <view class="space-y-3">
          <view class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-lg">
            <view class="text-lg font-semibold">渐变卡片</view>
            <view class="text-sm opacity-90 mt-1">这是一个渐变背景的卡片</view>
          </view>
          
          <view class="glass p-4 rounded-lg border border-gray-200">
            <view class="text-lg font-semibold">毛玻璃卡片</view>
            <view class="text-sm text-gray-600 mt-1">这是一个毛玻璃效果的卡片</view>
          </view>
        </view>
      </view>

      <!-- 表单组件示例 -->
      <view class="card">
        <view class="text-lg font-semibold mb-4">表单组件</view>
        <view class="space-y-4">
          <view>
            <view class="text-sm text-gray-600 mb-2">用户名</view>
            <input 
              v-model="formData.username"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary-500 focus:outline-none"
              placeholder="请输入用户名"
            />
          </view>
          
          <view>
            <view class="text-sm text-gray-600 mb-2">密码</view>
            <input 
              v-model="formData.password"
              type="password"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary-500 focus:outline-none"
              placeholder="请输入密码"
            />
          </view>
          
          <view class="flex items-center">
            <input 
              v-model="formData.remember"
              type="checkbox"
              class="mr-2"
            />
            <view class="text-sm text-gray-600">记住我</view>
          </view>
        </view>
      </view>

      <!-- 列表组件示例 -->
      <view class="card">
        <view class="text-lg font-semibold mb-4">列表组件</view>
        <view class="space-y-3">
          <view 
            v-for="(item, index) in listData" 
            :key="index"
            class="flex items-center p-3 bg-gray-50 rounded-lg"
          >
            <view class="w-10 h-10 bg-primary-500 rounded-full flex items-center justify-center text-white font-bold mr-3">
              {{ item.avatar }}
            </view>
            <view class="flex-1">
              <view class="font-semibold">{{ item.name }}</view>
              <view class="text-sm text-gray-500">{{ item.desc }}</view>
            </view>
            <view class="text-sm text-gray-400">{{ item.time }}</view>
          </view>
        </view>
      </view>

      <!-- 动画示例 -->
      <view class="card">
        <view class="text-lg font-semibold mb-4">动画效果</view>
        <view class="text-center">
          <view 
            class="w-20 h-20 bg-primary-500 rounded-full mx-auto mb-4 animate-bounce-soft"
            @tap="toggleAnimation"
          ></view>
          <view class="text-sm text-gray-600">点击圆形查看动画效果</view>
        </view>
      </view>

      <!-- 响应式示例 -->
      <view class="card">
        <view class="text-lg font-semibold mb-4">响应式布局</view>
        <view class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          <view 
            v-for="i in 6" 
            :key="i"
            class="bg-primary-100 text-primary-700 p-3 rounded-lg text-center"
          >
            项目 {{ i }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 表单数据
const formData = reactive({
  username: '',
  password: '',
  remember: false
})

// 列表数据
const listData = ref([
  {
    avatar: 'A',
    name: 'Alice Johnson',
    desc: '前端开发工程师',
    time: '2分钟前'
  },
  {
    avatar: 'B',
    name: 'Bob Smith',
    desc: 'UI/UX 设计师',
    time: '5分钟前'
  },
  {
    avatar: 'C',
    name: 'Charlie Brown',
    desc: '产品经理',
    time: '10分钟前'
  }
])

/**
 * 切换动画效果
 */
const toggleAnimation = () => {
  // 这里可以添加动画切换逻辑
  console.log('动画切换')
}
</script>

<style lang="scss" scoped>
.demo-page {
  min-height: 100vh;
  background: #f8fafc;
}

// 输入框焦点效果
input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

// 列表项悬停效果
.space-y-3 > view {
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

// 响应式断点
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
</style>
